<template>
  <!-- 未完成: 点击虚拟背景， input 改为 autocomplete 远程搜索显示 -->
  <el-container id="searchContainer">
    <!-- logo 和 字 -->
    <el-header id="logo">
      <el-row>
        <el-col :span="12" :offset="8">
          <div>
            <i class="iconfont icon-book"></i>
            <span id="font">  Reader site</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
  
    <!--  搜索栏 -->
    <el-footer>
      <el-row>
        <el-col>
          <div>
            <!-- 输入框 -->
            <el-input
              @click="inputClick"
              prefix-icon="el-icon-search"
              ref="innerAutocomplete"
              class="innerInput"
            >
            </el-input>
            
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import { ref,watchEffect, reactive, toRefs, defineComponent } from 'vue'
import { search, getNames } from "@/api/axios/search.ts"

export default defineComponent({
  name: "search",
  setup() {
    
    // el-autocomplete 组件相关
    let timeout;
    const elAutocomplete = reactive({
      // 输入
      innerAutocomplete: '',
      inputClick: () => {
        // 不会显示建议
        // elAutocomplete.innerAutocomplete.activated = false;
        // 删除 display:none, 显示搜索栏
        document.querySelector('div.search').removeAttribute('style');
        // 焦点放到新搜索栏
        document.querySelector('div.searchInput>div>input').focus()
        // 给 body 添加 一个 class，为了隐藏 body 的滚动条
        document.getElementsByTagName("body")[0].classList.add("body_search_show")
      }
    })
    
    // 转为 ref 对象，方便使用
    const refComplete = toRefs(elAutocomplete)

    return {
      ...refComplete,
    }
    
  }
})
</script>

<style>
body.body_search_show {
  overflow: hidden;
}
</style>

<style lang="scss" scoped>

@import "@/static/css/iconfont";

// 引入(版权)字体-方正粗黑宋简体
@font-face {
  font-family: FZCHSJW;
  src: url('@/static/font/FZCHSJW.TTF');
}

// 书本 logo 样式
// $icon_size: 85px;
$icon_size: 33px;
.icon-book {
  font-size: $icon_size;
  color: #2fa0dc;
}
    
// 字体样式
#font {
  font-family: "FZCHSJW";
  // font-size: 65pt;
  font-size: 25pt;
}

$top: 22%;
$l_r: 18%;
#searchContainer {
  // width: 100%;
  // height: 100%;
  top: $top;
  left: $l_r;
  right: $l_r;
  position: absolute;
}

$input_width: 833px;
:deep .el-input__inner {
  // background-color: #7b7b7b ;
  width: $input_width;
}

</style>
